@page "/Tabs"

@using FluentUI.Demo.Shared.Pages.Tabs.Examples

<h1>Tabs</h1>

<p><em>Tabs</em> are a set of layered sections of content that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel.</p>
<p>
    <code>&lt;FluentTabs&gt;</code> wraps the <code>&lt;fluent-tabs&gt;</code> element, a web component implementation of a tabs composition leveraging the
    Fluent UI design system. It uses the <code>&lt;FluentTab&gt;</code> component to define the structure and content.
</p>

<p>
    The default width for the active tab indicator is 20 pixels. If you want to change this, you need to add some rules to your CSS like this:
</p>
<CodeSnippet Language="css">
    ::deep fluent-tabs::part(activeIndicator) {
        width: 85%;
    }
</CodeSnippet>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(TabsDefault)"></DemoSection>

<DemoSection Title="Custom Header and Panel usage" Component="@typeof(TabsHeaderPanel)">
    <Description>
        <p>
            A <code>&lt;FluentTab&gt;</code> exposes a <code>Header</code> parameter that can be used to provide custom content for the tab header. This can be used to add icons, badges, etc.
            The <code>Panel</code> parameter allows for custom content to be used for the tab panel. This can be used to add additional content to the panel, or to use a different component
        </p>
    </Description>
</DemoSection>

<DemoSection Title="Dynamic" Component="@typeof(TabsDynamic)"></DemoSection>

<DemoSection Title="Extra content" Component="@typeof(TabsExtraContent)"></DemoSection>

<DemoSection Title="No active tab indicator" Component="@typeof(TabsNoIndicator)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentTabs)" />

<ApiDocumentation Component="typeof(FluentTab)" />